<template>
  <div id="app">
    <div class="top">
      <van-nav-bar
        title="发布话题"
        left-arrow
        :border="false"
        @click-left="$router.go(-1)" />
    </div>
    <div class="cont">
      <!-- 表单 -->
      <form>
        <img class="add" src="@/assets/add.jpg" alt="" />
        <div class="i1">
          标题<input
            v-model="title"
            class="inp1"
            type="text"
            placeholder="快给即将发布的帖子取个标题吧！"
          />
        </div>
        <div class="i2">
          类型<input
            v-model="type"
            class="inp2"
            type="text"
            placeholder="例如：猫猫，狗狗，兔子"
          />
        </div>
        <div class="i3">
          详情
          <textarea
            v-model="details"
            class="inp3"
            placeholder="输入你想说的内容吧！"
          ></textarea>
        </div>
        <div class="xian"></div>

        <!-- 文件上传 -->
        图片
        <van-uploader
          class="list-upload"
          :after-read="afterRead"
          accept="image/jpeg,image/png"
          :preview-image="true"
          :before-read="beforeRead"
          :max-count="3"
          preview-full-image
          v-model="fileList"
        />

        <!-- 提交 -->
        <button @click="onSubmit">发布话题</button>
      </form>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { addTopic, update } from "@/api/home";
import axios from "axios";

export default {
  data() {
    return {
      item: [],
      title: "",
      type: "",
      details: "",
      status: "",
      message: "",
      fileList: [
        // Uploader 根据文件后缀来判断是否为图片文件
        // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
      ],
    };
  },
  methods: {
    // 返回布尔值
    beforeRead(file) {
      if (file.type !== "image/jpeg") {
        Toast("请上传 jpg 格式图片");
        return false;
      }
      return true;
    },
    //文件读取完回调函数
    afterRead(file) {
      var data = new FormData();
      data.append("file", file.file);
      data.append("uid", this.$store.state.user.uid);
      data.append("title", this.title);
      let config = {
        headers: {
          //添加请求头
          "Content-Type": "application/x-www-form-urlencoded",
        },
      };
      //上传图片
      axios.post("http://1.15.223.82:3000/v1/addT", data).then((res) => {
        console.log("res", res);
        // if (res.)
      });
    },

    onSubmit() {
      addTopic({
        title: this.title,
        describe: this.details,
        name: this.type,
        uid: this.$store.state.user.uid,
        uname: this.$store.state.user.uname,
      }).then((res) => {
        if (res.data.status != 200) {
          return Toast.fail("添加失败!");
        }
        update({
          uid: this.$store.state.user.uid,
          title: this.title,
        }).then((res) => {
          console.log(res);
        })
        
        return Toast.success("添加成功!");
      });
      this.$router.push('/home/more')
    },
  },
};
</script>

<style lang="scss" scoped>
.van-nav-bar {
  ::v-deep .van-icon {
    color: black;
  }
  ::v-deep .van-nav-bar__title {
    font-weight: bold;
    font-family: '黑体';
  }
}
::v-deep .van-nav-bar .van-icon {
  color: black;
}
.cont {
  width: 300px;
  margin: auto;
  font-size: 17px;
}
.cont .i1 {
  height: 50px;
  line-height: 40px;
  display: flex;
  border-bottom: 1px solid rgb(187, 185, 185);
  &:focus-within {
    border-bottom: 1px solid #ffcc1f;
  }
}
.cont .inp1 {
  display: block;
  width: 230px;
  height: 38px;
  border: none;
  margin-left: 10px;
  font-size: 15px;
}
.cont .i2 {
  height: 40px;
  line-height: 40px;
  display: flex;
  border-bottom: 1px solid rgb(187, 185, 185);
  margin: 10px 0;
  &:focus-within {
    border-bottom: 1px solid #ffcc1f;
  }
}
.cont .inp2 {
  display: block;
  width: 230px;
  height: 38px;
  border: none;
  margin-left: 10px;
  font-size: 15px;
}
.cont .i3 {
  height: 100x;
  border-bottom: 1px solid rgb(187, 185, 185);
  &:focus-within {
    border-bottom: 1px solid #ffcc1f;
  }
}
.cont .inp3 {
  display: block;
  width: 230px;
  height: 70px;
  border: none;
  font-size: 15px;
}

button {
  margin: auto;
  display: block;
  width: 240px;
  height: 30px;
  background: #ffcc1f;
  color: white;
  font-weight: 600;
  border: none;
  border-radius: 20px;
  margin-top: 20px;
}
.add {
  width: 300px;
  height: 170px;
}

.van-nav-bar {
  ::v-deep .van-icon {
    color: black;
  }
    ::v-deep .van-nav-bar__title {
    font-weight: bold;
    font-family: '黑体';
  }
}
</style>
